<template>
  <div style="margin: 50px">
    <div>
      <el-input type="textarea" v-model="hanZi" placeholder="请输入需要转换的内容" clearable style="width: 1000px"/>
    </div>
    <div style="width:1000px; margin: 10px 812px">
      <el-button type="primary" icon="el-icon-refresh" size="large" @click="handleQuery">转换</el-button>
      <el-button icon="el-icon-delete" size="large" @click="resetQuery">重置</el-button>
    </div>
    <div style="margin-top: 50px">
      <el-input type="textarea" style="width: 1000px;height: auto" v-model="pinyin" :disabled="true"/>
    </div>
    <div style="margin: 10px 855px;">
      <el-button icon="el-icon-copy-document" size="large" @click="copy">复制到剪切板</el-button>
    </div>
  </div>
</template>

<script>
import { convert } from "@/api/util/hanzitopinyin";

export default {
  name: "hanzitopinyin",
  data() {
    return {
      hanZi: "",
      pinyin: ""
    };
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      const hanzi = this.hanZi;
      if(hanzi === "" || hanzi === null){
        this.$modal.msgError("请输入需要转换的内容！");
        return false;
      }
      convert(hanzi).then(res => {
        if (res.code === 201) {
          this.$modal.msgError(res.msg);
        } else {
          this.pinyin = res.data;
        }
      });
    },
    /** 重置 */
    resetQuery() {
      this.hanZi = "";
      this.pinyin = "";
    },
    copy() {
      const that = this;
      navigator.clipboard.writeText(this.pinyin).then(function() {
        that.$modal.msgSuccess('复制成功');
      }, function(err) {
        that.$modal.msgError('无法复制文本: ', err);
      });
    }
  }
};
</script>
